<template>
  <!-- 顶部返回吸顶条 -->
  <base-header :showButton="true" :backTextShow="true">
    <template #title>工作流审批详情</template>
  </base-header>
  <div class="mt20">
    <el-row class="contract_base_title">流程单据名称：{{ docConfigName }}</el-row>
    <div class="tabAll">
      <el-tabs v-model="activeName">
        <el-tab-pane label="单据详情" name="1"></el-tab-pane>
        <el-tab-pane label="审批记录" name="2"></el-tab-pane>
        <el-tab-pane label="流程图" name="3"></el-tab-pane>
      </el-tabs>
    </div>

    <div v-if="activeName == '1'">
      <component :is="current.com" v-if="componentShow" :componentObject="componentObject" :docConfigLineList="docConfigLineList"></component>
    </div>
    <div v-else-if="activeName == '2'">
      <processes-table ref="processesTableChild" :tableData="tableData"></processes-table>
    </div>
    <div v-if="activeName == '3'">
      <processes-bpmn
        :xmlStr="xmlStr"
        :flowViewerList="flowViewerList"
        :bpmnHeight="'calc(80vh - 130px)'"
        :key="new Date().getTime()"
      ></processes-bpmn>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, markRaw, defineAsyncComponent } from 'vue'
import { useRoute } from 'vue-router'
import { ERR_OK } from 'config/statusCode'
import baseHeader from 'components/base-header'
import processesTable from 'components/processes-table'
import processesBpmn from 'components/processes-bpmn'
import { flowtaskDetail, flowtaskProcessVariables } from 'api/personalCenter'
import { docConfigCodelineList } from 'api/personalCenter'
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 中英文
const route = useRoute()

// 定义初始组件
let current = reactive({
  com: markRaw(defineAsyncComponent(() => import(`views/personalCenter/componentForm/test.vue`)))
})
// 切换组件
const switchComponent = (component) => {
  current.com = markRaw(defineAsyncComponent(() => import(`views/personalCenter/componentForm/${component}.vue`)))
}

const processInstanceId = ref('')
const tableData = ref([])
const xmlStr = ref('')
const flowViewerList = ref([])

const getdetails = async () => {
  const { code, data } = await flowtaskDetail(processInstanceId.value, {})
  if (code === ERR_OK) {
    tableData.value = data.flowTaskRecords || []
    xmlStr.value = data.processXml || ''

    let flowViewMap = data.flowViewMap || [] // 走完的节点
    var flowViewMapArr = []
    for (let i = 0; i < Object.keys(flowViewMap).length; i++) {
      flowViewMapArr.push({ key: Object.keys(flowViewMap)[i], completed: flowViewMap[Object.keys(flowViewMap)[i]] })
    }
    flowViewerList.value = flowViewMapArr

    tableData.value.forEach((item) => {
      item.assigneeName = item.assigneeNameList ? item.assigneeNameList.toString() : ''
      item.assigneeNameListLength = item.assigneeNameList ? item.assigneeNameList.length : 0
    })
  }
}

const docConfigCode = ref('')
const docConfigLineList = ref([])
const componentObject = reactive({})
const componentShow = ref(false)

const getflowtaskProcessVariables = async () => {
  // 单据流程渲染数据
  const { code, data } = await docConfigCodelineList({ docConfigCode: docConfigCode.value })
  if (code === ERR_OK) {
    let docList = data.docConfigLineList || []
    docConfigLineList.value = JSON.parse(JSON.stringify(docList))
  }

  const { codes, datas } = await flowtaskProcessVariables(processInstanceId.value)
  if (codes === ERR_OK) {
    componentObject = datas || {}
  }
  componentShow.value = true
}

const activeName = ref('1')
const docConfigName = ref('')
const fromUrl = ref('')
onMounted(() => {
  docConfigCode.value = route.query.docConfigCode || ''
  docConfigName.value = route.query.docConfigName || ''
  fromUrl.value = route.query.fromUrl || ''
  processInstanceId.value = route.query.processInstanceId || ''
  if (processInstanceId.value) {
    getdetails()
  }
  getflowtaskProcessVariables()
  switchComponent(fromUrl.value)
})
</script>
<style lang="scss" scoped>
.mt20 {
  margin-top: 20px;
}
</style>
